<template>
	<div :style="{ background: `url(${state.config.wapLoginBgc}) no-repeat` }" class="main-content flex-center">
		<div class="login-block">
			<img class="login-logo" :src="state.config.wapLoginLogo" alt="">
			<!-- <view class="login-name">{{state.config.siteName}}</view> -->
			<div class="login-line">
				<i class="iconfont icon-user" />
				<input class="login-input" v-model="state.info.username" placeholder="用户名" placeholder-style="color:#fff" />
			</div>
			<div class="login-line">
				<i class="iconfont icon-password" />
				<input class="login-input" v-model="state.info.password" type="password" placeholder="密码" placeholder-style="color:#fff" />
			</div>
			<div class="login-btn">
				<button class="btn hand" @click="login(state.info, toHome)" :style="{ background: state.config.webLoginBtnColor }">登 录</button>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { reactive, onMounted, getCurrentInstance } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { login } from './sso'
	import { clear } from '../../utils/utils'
	const { proxy } = getCurrentInstance()

	const state = reactive({
		info: {
			username: "",
			password: ""
		},
		config: proxy.$config
	})

	const toHome = () => {
		uni.switchTab({
			url: '/views/tabs/home/Home'
		})
	}

	onMounted(() => {
		clear()
		uni.setStorageSync('config', proxy.$config)
		let account = uni.getStorageSync('account')
		if(account){
			state.info.username = account.username
			state.info.password = account.password
		}
	})
</script>
<style lang="scss" scoped>
	.main-content {
		background-size: 100% 100% !important;

		.login-block {
			width: 70%;
			text-align: center;
			color: #fff;
			margin-bottom: 300rpx;

			.login-logo {
				// width: 440rpx;
				margin-bottom: 60rpx;
			}

			.login-name {
				margin-bottom: 60rpx;
				font-size: 52rpx;
				font-weight: 800;
			}

			.login-line {
				position: relative;
				display: flex;
				height: 76rpx;
				width: 100%;
				margin-bottom: 40rpx;
				border-radius: 4rpx;
				border: 1rpx solid #fff;


				i {
					width: 76rpx;
					height: 76rpx;
					line-height: 76rpx;
					font-size: 36rpx;
				}

				.login-input {
					width: calc(100% - 76rpx);
					height: 100%;
					background: none;
					color: #fff;
					font-size: 32rpx;
					outline: none;
					border: none;
					text-align: left;
				}

				.verifyCode {
					position: absolute;
					right: 6rpx;
					top: 7rpx;
					height: 60rpx;
				}
			}

			.login-btn {
				height: 78rpx;
				width: 100%;
				margin-bottom: 40rpx;

				.btn {
					width: 100%;
					height: 78rpx;
					background: #409eff;
					border: none;
					color: #fff;
					font-size: 32rpx;
					border-radius: 6rpx;
				}
			}

		}
	}
</style>